<template>
  <div class="logo">{{ isOpen ? "V" : "Vue3" }}</div>
  <el-menu router
             class="el-menu-vertical-demo"
             active-text-color="#409eff"
             background-color="#304156"
             text-color="#fff"
             :default-active="activeMenu.path"
             :collapse="isOpen">
        <SubMenu v-for="item in menu"
                 :key="item.title"
                 :itemConfig="item" />
    </el-menu>
</template>

<script setup>
  import { ElMenu } from "element-plus";
  import { menu } from "@/router/menu";
  import SubMenu from "./SubMenu.vue";
  import { toRefs } from "vue";
  import { useStore } from "@/store";
  import { useRouter } from "vue-router";
  const store = useStore();
  const { activeMenu, isOpen } = toRefs(store);
  const router = useRouter();
  function goHome() {
    router.push("/");
  }
</script>

<style lang="less" scoped>
  .logo {
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    background: #304156;
  }
  .el-menu-vertical-demo {
    height: calc(100% - 80px);
    border-right: none;
    :deep(.el-menu){
      background-color: var(--el-menu-bg-color) !important;
    }
  }
</style>
